
{% macro Head(head) %}
    {% if head.sort %}
        <span class="badge bg-primary">{{ head.sort | safe }}</span>
    {% endif %}
    {% if head.role %}
        <span class="badge bg-secondary">{{ head.role | safe }}</span>
    {% endif %}
    {% if head.time %}
        <span class="text-muted">{{ head.time }}</span>
    {% endif %}

    <span class="info-box-text">
        {% if head.user %}
            <a href="{{ head.user.url }}">{{ head.user.name }}</a>
        {% endif %}
        {% if head.post %}
            <a href="{{ head.post.url }}">{{ head.post.title }}</a>
        {% endif %}
    </span>
{% endmacro %}

{% macro Heads(heads) %}
    {% from 'card/base_card.html' import nonModal %}
{% for head in heads %}
    {{ nonModal(
        head=Head(head),collapse=false
    ) }}
{% endfor %}
{% endmacro %}


{% macro Line(line) %}
    {% set colors = ["primary", "secondary", "info", "success", "warning", "danger", "light", "dark", "purple", "pink", "teal", "orange"] %}
    {% set color = colors | random %}
    <div class="callout callout-{{ color }}">
        {{ line | safe }}
    </div>
{% endmacro %}


{% macro Images(images) %}
    {% if images %}
        <div class="row d-flex justify-content-start flex-wrap">
            {% for image in images %}
                <div class="p-2 d-flex align-items-center justify-content-center" style="flex: 1 1 25%; max-width: 25%; aspect-ratio: 1/1; overflow: hidden;">
                    <img src="{{ image }}" class="rounded shadow" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;"
                         data-bs-toggle="modal" data-bs-target="#imageModal{{ loop.index }}" onclick="setImageSrc('{{ image }}', {{ loop.index }})">
                </div>
            {% endfor %}
        </div>

        {% for image in images %}
            <!-- Bootstrap Modal for each image -->
            <div class="modal fade" id="imageModal{{ loop.index }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body text-center">
                            <img id="modalImage{{ loop.index }}" src="" class="img-fluid rounded shadow">
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}

        <script>

            function setImageSrc(imageSrc, index) {
                document.getElementById('modalImage' + index).src = imageSrc;
            }
        </script>
    {% endif %}
{% endmacro %}


